<template>
	<view class="page flex-col" :style="elementStyle">
		<view class="group_1 flex-col" style="z-index: 9999;">

			<view class="section_7 flex-row">
				<text class="text_3" @click="xxxl()">{{ citySel }}</text>
				<image class="thumbnail_3" @click="xxxl()"
					src="/static/lanhu_111tongchengfenleishouye/SketchPngc733c10a226b07d9cd4ae9288dcd3f30f44d9742d1b2de7af0117c630c5d2ece.png" />

				<view class="section_1 flex-row justify-between">
					<image class="thumbnail_4" referrerpolicy="no-referrer"
						src="/static/lanhu_111tongchengfenleishouye/SketchPng17adbed81992fc5d606a8c7ea9856e2af52472c51a95b0e403ae9be8bd6f60cd.png" />
					<text class="text_4" style="line-height: 24rpx">
						<input style="height:60rpx" />
					</text>
				</view>

			</view>

			<view v-if="xiala">
				<view style="width:210rpx;height: 92rpx;font-size: 32rpx;background-color: #FFF2F3;border-radius: 50px;float: left;
				color:#333333;text-align: center;line-height: 92rpx;margin-left: 20rpx;margin-top: 40rpx"
					v-for="(item, index) in ctiyList" :key="index" @click="citySel2(item.name)">

					<text v-if="item.name == citySel" style="color: #FE373C">{{ item.name }}</text>
					<text v-else>{{ item.name }}</text>
				</view>
			</view>

		</view>
		<view class="box_17 flex-col" @click="xxxl2()">
			<!--      轮播图-->
			<view class="box_3 flex-col" v-if="!xiala"></view>

			<view class="mask" v-show="isMaskVisible">
				<!-- 这里可以添加遮罩层上的内容，比如加载图标或提示文本 -->

			</view>

			<view class="box_4 flex-row">
				<view class="image-text_19 flex-row justify-between">
					<image class="thumbnail_5" referrerpolicy="no-referrer"
						src="/static/lanhu_111tongchengfenleishouye/SketchPngb951b1224fd8136528546d228c028231e3dd6db6659fb2333f218c20c07eb83a.png" />
					<text class="text-group_1">
						同城分类平台明日举办第一届萌宠派对活动，欢迎大家积极
					</text>
				</view>
			</view>

			<view class="section_8 flex-row">
				<view class="box_18 flex-col">
					<view class="group_3 flex-col"></view>
					<text class="text_5">推荐</text>
				</view>
				<text class="text_6">附近</text>
				<text class="text_7">数码</text>
				<text class="text_8">萌宠</text>
				<text class="text_9">娱乐</text>
				<text class="text_10">风景</text>
				<image @click="go1(2)" class="thumbnail_6" referrerpolicy="no-referrer"
					src="/static/lanhu_111tongchengfenleishouye/SketchPnga5a7a663a2357a7f073a051307dfe6cf2ac8a2af8503a8505586d866ad0e6d6d.png" />
			</view>
			<view class="section_9 flex-row justify-between">

				<view class="box_19 flex-col" @click="go1(3)">
					<view class="group_4 flex-col">
						<view class="image-text_20 flex-col">
							<view class="image-wrapper_1 flex-col">
								<image class="thumbnail_7" referrerpolicy="no-referrer"
									src="/static/lanhu_111tongchengfenleishouye/SketchPng258ccf9d0c801cd61daba9f9b1c991dadb5ecefc83bc00513f3723da4157c5c2.png" />
							</view>
							<text class="text-group_2">
								初冬的午后，阳光暖身，咖啡暖手，工作有一点儿惬意
							</text>
						</view>
						<view class="group_12 flex-row justify-between">
							<view class="image-text_21 flex-row justify-between">
								<image class="thumbnail_8" referrerpolicy="no-referrer"
									src="/static/lanhu_111tongchengfenleishouye/SketchPng3de621d143b090a4a0f0adabf893eb6d35b6339d8e361630eab054dbedfa2434.png" />
								<text class="text-group_3">符颖建</text>
							</view>
							<view class="image-text_22 flex-row justify-between">
								<image class="thumbnail_9" referrerpolicy="no-referrer"
									src="/static/lanhu_111tongchengfenleishouye/SketchPng9909c28572f474cd08e2c66999d63424a10edfe0f62a70c9a5b8979ca42bebe2.png" />
								<text class="text-group_4">9517</text>
							</view>
						</view>
					</view>
					<view class="image-wrapper_2 flex-col">
						<image class="image_3" referrerpolicy="no-referrer"
							src="/static/lanhu_111tongchengfenleishouye/SketchPng863ca51835bdefca3386175efd93d6b4c643421082e93bd9de23ba3a5e04299e.png" />
					</view>
				</view>


				<view class="box_19 flex-col" @click="go1(3)">
					<view class="group_4 flex-col">
						<view class="image-text_20 flex-col">
							<view class="image-wrapper_1 flex-col">
								<image class="thumbnail_7" referrerpolicy="no-referrer"
									src="/static/lanhu_111tongchengfenleishouye/SketchPng258ccf9d0c801cd61daba9f9b1c991dadb5ecefc83bc00513f3723da4157c5c2.png" />
							</view>
							<text class="text-group_2">
								初冬的午后，阳光暖身，咖啡暖手，工作有一点儿惬意
							</text>
						</view>
						<view class="group_12 flex-row justify-between">
							<view class="image-text_21 flex-row justify-between">
								<image class="thumbnail_8" referrerpolicy="no-referrer"
									src="/static/lanhu_111tongchengfenleishouye/SketchPng3de621d143b090a4a0f0adabf893eb6d35b6339d8e361630eab054dbedfa2434.png" />
								<text class="text-group_3">符颖建</text>
							</view>
							<view class="image-text_22 flex-row justify-between">
								<image class="thumbnail_9" referrerpolicy="no-referrer"
									src="/static/lanhu_111tongchengfenleishouye/SketchPng9909c28572f474cd08e2c66999d63424a10edfe0f62a70c9a5b8979ca42bebe2.png" />
								<text class="text-group_4">9517</text>
							</view>
						</view>
					</view>
					<view class="image-wrapper_2 flex-col">
						<image class="image_3" referrerpolicy="no-referrer"
							src="/static/lanhu_111tongchengfenleishouye/SketchPng863ca51835bdefca3386175efd93d6b4c643421082e93bd9de23ba3a5e04299e.png" />
					</view>
				</view>


			</view>
		</view>


		<view class="group_5 flex-col" style="">
			<view class="section_10 flex-row justify-between">
				<view class="image-text_26 flex-col">
					<image class="thumbnail_13" referrerpolicy="no-referrer"
						src="/static/lanhu_111tongchengfenleishouye/SketchPng20c339b55de9a8ecb343a243847f825ed705d2cf5eb2cc161d22913e63ee1d28.png" />
					<text class="text-group_8">首页</text>
				</view>
				<view class="image-text_27 flex-col">
					<image class="thumbnail_14" referrerpolicy="no-referrer"
						src="/static/lanhu_111tongchengfenleishouye/SketchPng30be5b74dfb779614443691c23009f41b7f53a9374ab50ffe28b6e2869140df1.png" />
					<text class="text-group_9" @click="go1(1)">我的</text>
				</view>
			</view>
			<view class="section_11 flex-row">
				<view class="group_6 flex-col"></view>
			</view>
			<image class="label_1" @click="go1(5)"
				src="/static/lanhu_111tongchengfenleishouye/SketchPng5f3ad5838aa01595d7cb6edd2b6b3f628448a9e2d4306f9a9543ec87b4b19490.png" />
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				xiala: false,
				citySel: '未选择',
				isMaskVisible: false,
				elementStyle: {
					// position: 'fixed',
					// border:'1px solid red',
				},
				ctiyList: [],
				constants: {}
			};
		},
		onLoad() {

			this.getData()
		},
		methods: {
			getData() {
				var that = this
				uni.request({
					url: this.$global.baseUrl + 'getAreaList',
					method: 'GET',
					success: (res) => {
						that.ctiyList = res.data.data
						//默认选中第一个
					}
				});
			},
			xxxl() {
				if (this.xiala == 1) {
					this.xiala = 0
				} else {
					this.xiala = 1
				}
				
				this.isMaskVisible = !this.isMaskVisible;
				if (this.xiala) {
					this.elementStyle = {
						position: 'fixed',
					};
				} else {
					this.elementStyle = {
						position: '',
					};
				}
			},

			xxxl2() {
				this.xiala = 0
				this.isMaskVisible = false;
				this.elementStyle = {
					position: '',
				};
			},

			citySel2(name) {
				this.xiala = 0
				this.isMaskVisible = false;
				this.citySel = name
				this.elementStyle = {
					position: '',
				};
			},
			go1(id) {
				if (id == 1) {
					uni.navigateTo({
						url: '/pages/lanhu_171gerenzhongxinweidenglu/index',
					});
				}

				if (id == 2) {
					uni.navigateTo({
						url: '/pages/lanhu_122fenleiliebiaobianji/index',
					});
				}
				if (id == 3) {
					uni.navigateTo({
						url: '/pages/lanhu_131tongchengfenleitiezixiangqingmaijiaban/index',
					});
				}
				if (id == 5) {
					uni.navigateTo({
						url: '/pages/lanhu_162fabushuru/index',
					});
				}

			}
		}
	};
</script>
<style lang='css'>
	@import '../common/common.css';
	@import './assets/style/index.rpx.css';
</style>